<template>
  <div class="datasource">
    <!-- 头部 -->
    <div>
      <div class="datasource-head-container">
        <div class="datacource-operatr">
          <el-input v-model="state.name" placeholder="请输数据源名称" />
          <el-input v-model="state.group" placeholder="请输数据源分组" />
          <div>
            <el-button type="primary" @click="searchConfig">查询</el-button>
            <el-button plain @click="resetConfig">重置</el-button>
          </div>
        </div>
        <el-button type="primary" @click="addSourceData"><i class="el-icon-plus " /> 添加数据源</el-button>
      </div>
    </div>
    <span class="datasource-dashed" />
    <!-- 表单 -->
    <div ref="tablecontainer" class="datasource-table">
      <Data-Source-Table
        v-if="tableHeight"
        :is-loading="state.tableLoading"
        :table-columns="tableHead"
        :table-data="tableData"
        :table-height="tableHeight"
        @rowDel="delDataRow"
        @rowEdit="editRow"
      />
      <div class="datasource-table-pages">
        <el-pagination
          :current-page="state.pageCurrent"
          :page-sizes="state.pageSizes"
          :page-size="state.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Dialog-Oper
      v-if="isDialogSurvive"
      :is-show="isDialogShow"
      :row-now="rowNow"
      @closeDialog="isDialogShow = false"
      @addSource="addSource"
    />
  </div>
</template>

<script type="text/ecmascript-6">
import { state, initPage, createDataSource, upDataSource, delDataSource, testConnect } from '@/views/admin/dataSource/dataSourceState';
import DataSourceTable from './components/DataSourceTable';
import DialogOper from './components/Dialog';
export default {
  components: {
    DataSourceTable,
    DialogOper
  },
  data() {
    return {
      state,
      tableHeight: 0,
      isDialogShow: false,
      isDialogSurvive: true,
      rowNow: {},
      tableData: [],
      tableHead: [
        { title: '数据源', key: 'datasource' },
        { title: '数据源名称', key: 'datasourceName' },
        { title: '数据源分组', key: 'datasourceGroup' },
        { title: 'jdbc url', key: 'jdbcUrl' },
        { title: 'ZK地址', key: 'zkAdress' },
        { title: '数据库名', key: 'databaseName' },
        { title: '备注', key: 'comments' },
        { title: '操作', key: 'operating' }
      ]
    };
  },
  watch: {
    isDialogShow: {
      handler: function(v) {
        if (!v) {
          setTimeout(() => {
            this.isDialogSurvive = false;
          }, 200);
        }
      }
    }
  },
  mounted() {
    this.initPage();
  },
  methods: {
    addSource({ row, type }) {
      if (type === 'add') {
        testConnect(row).then(connectRes => {
          if (connectRes.success) {
            createDataSource(row).then(res => {
              if (res.success) {
                this.isDialogShow = false;
                this.tableData.unshift(row);
              }
            });
          }
        });
      }

      if (type === 'edit') {
        upDataSource(row).then(res => {
          if (res.success) {
            this.isDialogShow = false;
            for (const key in row) {
              this.rowNow[key] = row[key];
            }
          }
        });
      }
    },

    initPage() {
      initPage();
      window.addEventListener('DataSoruceTableData', this.setTableData);
      this.tableHeight = this.$refs.tablecontainer.offsetHeight - 70;
    },

    addSourceData() {
      this.rowNow = {};
      this.openDialog();
    },

    setTableData({ data: { data, total }}) {
      this.tableData = data.filter(item => {
        return {
          ...item,
          isDelLoading: false
        };
      });
      state.total = total;
    },

    // 打开编辑窗口
    editRow({ row }) {
      this.rowNow = row;
      this.openDialog();
    },

    delDataRow(scope) {
      const { $index, row: { id }} = scope;
      scope.row.isDelLoading = true;
      delDataSource([id]).then(res => {
        if (res.success) {
          this.tableData.splice($index, 1);
        }
      });
    },

    openDialog() {
      this.isDialogSurvive = true;
      setTimeout(() => {
        this.isDialogShow = true;
      });
    },
    // 查询
    searchConfig() {
      state.startSearch = !state.startSearch;
    },
    resetConfig() {
      ['name', 'group'].map(key => {
        state[key] = '';
      });

      this.initPage();
    },
    handleSizeChange(n) {
      state.pageSize = n;
    },
    handleCurrentChange(n) {
      state.pageCurrent = n;
    }
  }
};
</script>

<style lang="less" scoped>
  .datasource {
    width: calc(100% - 20px);
    height: calc(100vh - 120px);
    background-color: #fff;
    margin: 10px;
    border-radius: 6px;
    position: relative;
    > div {
      padding: 20px;
    }
  }
  .datasource-dashed {
    margin: 0 20px;
    border-top: 2px dashed #eee;
    display: block;
  }
  .datasource-head-container {
    .datacource-operatr {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-gap: 20px;
      margin-bottom: 20px;
    }
  }
  .datasource-table {
    height: calc(100% - 140px);
    width: 100%;
  }
  .datasource-table-pages {
    padding: 10px;
    text-align: right;
  }
</style>
